/* * @Author: wangguanqing * @Date: 2018-05-21 15:10:22 * @Last Modified by: hy * @Last Modified time: 2018-07-10 10:50:39 */

<template>
  <bg-lay-out>
    <div slot="headerText">房联行数据中心</div>
    <sel-city class="selCityCon" slot="headerMain" val="3" @onChangeTime="onChangeTime"></sel-city>
    <div slot="main">
      <div>
        <el-row class="rowCon" type="flex" justify="space-around">
          <div class="topLeftCon">
            <div class="topBottomRow">
              <div class="topBottomItem">
                <p class="topBottomNum">
                  {{storeAvg}}</p>
                <p style="font-size:20px">店均</p>
              </div>
              <div class="topBottomItem">
                <p class="topBottomNum">{{personAvg}}</p>
                <p style="font-size:20px">人均</p>
              </div>
            </div>
          </div>
          <div class="myBox-5 operation-boxTit">
            <div class="myBoxTit-5">
              业绩
              <div style="position: relative;z-index: 10;">
                <chart-lay-out :showLine="false" :showTitle="false" class="marginModify">
                  <bar-chart slot="main" v-model="rankingArr" :option="rotateOption"></bar-chart>
                </chart-lay-out>
                <div class="bottomSelBtn absTopRig-10-20">
                  <div :class="performanceDefault == '19009'  ? 'storeActive':'storeUnActive'" @click="onRankType('19009')" >
                    <el-button size="mini" round>区域</el-button>
                    </div>
                    <div :class="performanceDefault == '19007' ? 'storeActive':'storeUnActive'" @click="onRankType('19007')" >
                        <el-button size="mini" round>门店</el-button>
                    </div>
                    <div :class="performanceDefault == '19008' ? 'storeActive':'storeUnActive'" @click="onRankType('19008')" >
                        <el-button size="mini" round>个人</el-button>
                    </div>

                    <div :class="rankingDefault ? 'storeUnActive':'storeActive'" @click="onRank" >
                    <el-button size="mini" round>正序</el-button>
                    </div>
                    <div :class="rankingDefault ? 'storeActive':'storeUnActive'" @click="onRank" >
                        <el-button size="mini" round>倒序</el-button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </el-row>
        <el-row class="rowCon" type="flex" align="center" justify="space-around" style="flex-wrap:wrap;">
          <div class="myBox-5">
            <div class="myBoxTit-5">
              带看排名
              <div style="position: relative;z-index: 10;">
                <chart-lay-out :showLine="false" :showTitle="false" class="marginModify">
                  <bar-chart slot="main" v-model="storesIncomeArr" :option="rotateOption"></bar-chart>
                </chart-lay-out>
                <div class="bottomSelBtn absTopRig-5-20">
                    <div :class="lookDefault == '0'  ? 'storeActive':'storeUnActive'" @click="onLookTypeClass('0')" >
                    <el-button size="mini" round>区域</el-button>
                    </div>
                    <div :class="lookDefault == '1' ? 'storeActive':'storeUnActive'" @click="onLookTypeClass('1')" >
                        <el-button size="mini" round>门店</el-button>
                    </div>
                    <div :class="lookDefault == '5' ? 'storeActive':'storeUnActive'" @click="onLookTypeClass('2')" >
                        <el-button size="mini" round>个人</el-button>
                    </div>

                  <div :class="lookSortDefault  ? 'storeUnActive':'storeActive'" @click="onLookSort()" >
                    <el-button size="mini" round>正序</el-button>
                    </div>
                    <div :class="lookSortDefault ? 'storeActive':'storeUnActive'" @click="onLookSort()" >
                        <el-button size="mini" round>倒序</el-button>
                    </div>
                </div>
              </div>
            </div>
            <div class="myBoxCon">
              <div class="bottomSelBtn absTopCenter-80" style="justify-content:center">
                  <div :class="lookClassDefault == '0'  ? 'storeActive':'storeUnActive'" @click="onLookType('0')" >
                    <el-button size="mini" round>带看量</el-button>
                    </div>
                    <div :class="lookClassDefault == '1' ? 'storeActive':'storeUnActive'" @click="onLookType('1')" >
                        <el-button size="mini" round>带看率</el-button>
                    </div>
                    <div :class="lookClassDefault == '2' ? 'storeActive':'storeUnActive'" @click="onLookType('2')" >
                        <el-button size="mini" round>带看转化率</el-button>
                    </div>
                </div>
            </div>
          </div>
        </el-row>
        <el-row class="rowCon" type="flex" align="center" justify="space-around" style="flex-wrap:wrap;">
          <div class="myBox-5 marginBot-20">
            <div class="myBoxTit-5">
              买卖成交量
              <div style="position: relative;z-index: 10;">
                <chart-lay-out :showLine="false" :showTitle="false" class="marginModify">
                  <bar-chart slot="main" v-model="personalClinchArr" :option="personalClinchOption"></bar-chart>
                </chart-lay-out>
                <div class="bottomSelBtn absTopRig-10-20">
                    <div :class="buySellDefault == '19001'  ? 'storeActive':'storeUnActive'" @click="onPersonTypeClass('19001')" >
                    <el-button size="mini" round>区域</el-button>
                    </div>
                    <div :class="buySellDefault == '19002' ? 'storeActive':'storeUnActive'" @click="onPersonTypeClass('19002')" >
                        <el-button size="mini" round>门店</el-button>
                    </div>
                    <div :class="buySellDefault == '19003' ? 'storeActive':'storeUnActive'" @click="onPersonTypeClass('19003')" >
                        <el-button size="mini" round>个人</el-button>
                    </div>

                  <div :class="buySellSortDefault  ? 'storeUnActive':'storeActive'" @click="onPersonSort()" >
                    <el-button size="mini" round>正序</el-button>
                    </div>
                    <div :class="buySellSortDefault ? 'storeActive':'storeUnActive'" @click="onPersonSort()" >
                        <el-button size="mini" round>倒序</el-button>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </el-row>
      </div>
    </div>
  </bg-lay-out>
</template>
<script>
    import chartLayOut from "@/components/Charts/chartLayOut";
    import newChart from "@/components/Charts/newChart";
    import barChart from "@/components/Charts/barChart";
    import selCity from "@/components/flh/selCity";
    import bgLayOut from "@/components/bgLayOut";
    import {
        GetSumData,
        GetOperatingDataRankings
    } from "@/api/flh/home";
    export default {
        components: {
            newChart,
            selCity,
            bgLayOut,
            barChart,
            chartLayOut,
        },
        data() {
            return {
                cityId: 0,
                rotateOption: {},
                personalClinchOption: {
                    center: ["50%", "50%"]
                },
                personAvg: "", // 人均
                storeAvg: "", // 店均
                buySellDefault: "19001", // 成交量维度
                buySellSortDefault: false, // 成交量正序
                lookDefault: "0", // 带看排名维度
                performanceDefault: "19009", // 买卖成交量维度
                personDefault: "0",
                lookSortDefault: false,
                rankingDefault: false,
                rankingArr: [], // 买卖成交量
                storeId: "", // 在地图上选择的门店id
                personalClinchDefalut: "19003",
                lookClassDefault: "0",
                areaName: "老城区",
                storesIncomeArr: [], // 门店收入top10
                personalClinchArr: [], // 个人收入
                screenObj: {}, // 存放数据
                params: {
                    startTime: "",
                    endTime: "",
                    districtId: this.$route.query.districtId, // 获取上页面传递过来的参数
                    queryType: null
                }
            };
        },
        methods: {
            onPersonSort() {
                this.$set(this, "buySellSortDefault", !this.buySellSortDefault);
                this.fetchPersonalClinch();
            },
            onPersonTypeClass(res) {
                this.$set(this, "buySellDefault", res);
                this.fetchPersonalClinch();
            },
            onLookTypeClass(res) {
                this.$set(this, "lookDefault", res);
                this.fetchStoresIncome();
            },
            onLookSort() {
                this.$set(this, "lookSortDefault", !this.lookSortDefault);
                this.fetchStoresIncome();
            },
            onLookType(res) {
                this.$set(this, "lookClassDefault", res);
                this.fetchStoresIncome();
            },
            onRankType(res) {
                this.$set(this, "performanceDefault", res);
                this.fetchRanking();
            },
            onRank() {
                this.$set(this, "rankingDefault", !this.rankingDefault);
                this.fetchRanking();
            },
            // 买卖成交量
            async fetchPersonalClinch(num) {
                try {
                    var params = {
                        cityId: this.cityId,
                        queryType: this.buySellDefault,
                        isASC: !this.buySellSortDefault, // 正序倒序
                        areaId: this.screenObj.area.id,
                        storeId: this.screenObj.store.id,
                        startTime: this.screenObj.gTime[0],
                        endTime: this.screenObj.gTime[1]
                    };
                    var res = await GetOperatingDataRankings(params);
                    if (res.data.code === "0") {
                        var resData = res.data.result;
                        this.$set(this, "personalClinchArr", resData)
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            // 带看排名
            async fetchStoresIncome() {
                try {
                    var lookQueryType = "19015";
                    // this.lookDefault  区域门店个人
                    // this.lookClassDefault  待看量 带看率 带看转化率
                    if (this.lookDefault === "0" && this.lookClassDefault === "0") {
                        // 区域待看量
                    } else if (this.lookDefault === "1" && this.lookClassDefault === "0") {
                        // 门店 待看量
                        lookQueryType = "19013";
                    } else if (this.lookDefault === "2" && this.lookClassDefault === "0") {
                        // 个人 待看量
                        lookQueryType = "19014";
                    } else if (this.lookDefault === "0" && this.lookClassDefault === "1") {
                        // 区域 带看率
                        lookQueryType = "19018";
                    } else if (this.lookDefault === "0" && this.lookClassDefault === "2") {
                        // 区域 带看转化率
                        lookQueryType = "19021";
                    } else if (this.lookDefault === "1" && this.lookClassDefault === "1") {
                        // 门店 带看率
                        lookQueryType = "19016";
                    } else if (this.lookDefault === "1" && this.lookClassDefault === "2") {
                        // 门店 带看转化率
                        lookQueryType = "19019";
                    } else if (this.lookDefault === "2" && this.lookClassDefault === "1") {
                        // 个人 带看率
                        lookQueryType = "19017";
                    } else if (this.lookDefault === "2" && this.lookClassDefault === "2") {
                        // 个人 带看转化率
                        lookQueryType = "19020";
                    }
                    var params = {
                        cityId: this.cityId,
                        queryType: lookQueryType,
                        isASC: !this.lookSortDefault, // 正序倒序
                        areaId: this.screenObj.area.id,
                        storeId: this.screenObj.store.id,
                        startTime: this.screenObj.gTime[0],
                        endTime: this.screenObj.gTime[1]
                    };
                    var res = await GetOperatingDataRankings(params);
                    if (res.data.code === "0") {
                        var resData = res.data.result;
                        this.$set(this, "storesIncomeArr", resData)
                    }
                } catch (e) {
                    console.log(e);
                }
            },
            // 买卖成交量
            async fetchRanking() {
                try {
                    var params = {
                        cityId: this.cityId,
                        queryType: this.performanceDefault,
                        isASC: !this.rankingDefault, // 正序倒序
                        areaId: this.screenObj.area.id,
                        storeId: this.screenObj.store.id,
                        startTime: this.screenObj.gTime[0],
                        endTime: this.screenObj.gTime[1]
                    };
                    var res = await GetOperatingDataRankings(params);
                    if (res.data.code === "0") {
                        this.$set(this, "rankingArr", res.data.result)
                    }
                } catch (error) {
                    console.log(error);
                }
            },
            // 店均、个人均
            async fetchStorePerson() {
                try {
                    var params = {
                        cityId: this.cityId,
                        areaId: this.screenObj.area.id,
                        storeId: this.screenObj.store.id,
                        startTime: this.screenObj.gTime[0],
                        endTime: this.screenObj.gTime[1]
                    };
                    var res = await GetSumData(params);
                    if (res.data.code === "0") {
                        this.personAvg = res.data.result.personAvg;
                        this.storeAvg = res.data.result.storeAvg;
                    }
                } catch (error) {
                    console.log(error);
                }
            },
            formatterModal(res, params, unit, color) {
                var minResult = "";
                if (res[0].list) {
                    res[params[0].dataIndex].list.forEach(item => {
                        var minItem =
                            "<div style='display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px'><span>" +
                            item.name +
                            "</span><span style='margin-top:2px;font-size:20px;font-family:DIN Condensed Bold'>" +
                            item.value +
                            "</span></div>";
                        minResult += minItem;
                    });
                }
                var index = params[0].dataIndex;
                var val = res[index].value;
                var nowColor = color ? "color" : "#31cee6";
                var imgConStart =
                    "<div style=display:flex;padding:12pt 10px;color:" +
                    nowColor +
                    ";flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px;'>" +
                    "<span style='width:100%;font-size:30px;padding:8pt 0 0 0 ;font-family:DIN Condensed Bold'>" +
                    val +
                    "</span>" +
                    "<div style='width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt;font-size:12px'>";

                var result =
                    minResult === "" ?
                    imgConStart + "</div>" :
                    imgConStart + minResult + "</div>";
                return result;
            },
            // 改变时间
            onChangeTime(res) {
                if (res) {
                    this.cityId = res.cityId
                    this.areaName = res.area.name;
                    this.screenObj = res;
                    this.fetchData();
                }
            },
            // 获取数据
            fetchData() {
                // 店均、个人均
                this.fetchStorePerson();
                // 业绩
                this.fetchRanking();
                // //带看排名
                this.fetchStoresIncome();
                // // //买卖成交量
                this.fetchPersonalClinch();
            },
            forEachFun(initData) {
                // 处理数据生成Option
                var option = this.$utils.returnItemSeries(initData);
                this.$set(this, initData.returnOption, option);
                var self = this;
                setTimeout(function() {
                    if (self.$refs[initData.refName][0]) {
                        self.$refs[initData.refName][0].initChart();
                    } else {
                        self.$refs[initData.refName].initChart();
                    }
                }, 0);
            }
        }
    };
</script>
<style>
    .radioCon .el-radio__input.is-checked+.el-radio__label {
        color: "#ffffff";
    }
    
    .my-radio .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background: #084f91;
        border-color: #084f91;
        color: white;
    }
    
    .my-radio .el-radio-button__inner {
        background-color: #171946;
        border-color: #084f91;
        color: #1776fd;
    }
    
    .my-radio .el-radio-button:first-child .el-radio-button__inner {
        border-left: 1px solid #084f91;
    }
</style>

<style scoped lang="scss">
    @import "../main.css";
    @import "../../../../styles/base/_parameters";
    .operation-boxTit {
        width: 80% !important;
        margin-top: 20px;
        margin-left: 20px;
    }
    
    .bottomSelBtn {
        @include flex-dr-ic-je;
        margin-right: 10px;
    }
    
    .bottomSelBtn .storeUnActive .el-button {
        background: transparent;
        border: 0;
        color: #00d1ff;
    }
    
    .bottomSelBtn .storeActive .el-button {
        background: #00d1ff;
        border: 1px solid #00d1ff;
        color: black;
    }
    
    .selCityCon {
        text-align: center;
        margin-top: 20px;
    }
    
    .topLeftCon span {
        font-size: 50px;
        line-height: 60px;
        margin-left: 22pt;
        margin-top: 2px;
    }
    
    .topLeftCon {
        @include flex-dc;
        width: 890px;
        height: 378px;
        margin-top: 20px;
        color: #2ff0d2;
        @include moduleBg(bg_890x393);
    }
    
    .topBottomItem {
        padding: 0 5px;
        text-align: center;
    }
    
    .topBottomNum {
        @include din(40px);
    }
    
    .topBottomRow {
        @include flex-dr-ic-jsa;
        width: 100%;
        color: #2ff0d2;
    }
    
    .topLeftCon {
        @include flex-dc-ic-jc;
        width: 373px;
        height: 408px;
        color: #2ff0d2;
        @include moduleBg(bg_373x393);
    }
    
    .myBox-5 {
        width: 100%;
        @include moduleBg(bg_1813x393);
    }
    
    .rowCon:nth-of-type(1) .myBox-5 {
        width: 100%;
        @include moduleBg(bg_1420x393);
    }
    
    .myBoxTit-5 {
        /* text-shadow: 1px 1px 30px cyan; */
        padding-top: 14px;
        font-size: 22px;
        color: #2ff0d2;
        text-align: center;
        margin: 0 auto;
        width: 100%;
    }
    
    .marginModify {
        margin-top: 25px !important;
    }
</style>